<template>
  <div>
    <!-- 示例1: 基础使用 -->
    <Checkbox v-model="checked1" label="基础复选框"/>

    <!-- 示例2: 带颜色和大小的 -->
    <Checkbox
        v-model="checked2"
        label="自定义颜色"
        color="#ff4757"
        size="large"
    />

    <!-- 示例3: 禁用状态 -->
    <Checkbox
        v-model="checked3"
        label="禁用状态"
        disabled
    />

    <!-- 示例4: 复选框组 -->
    <div v-for="option in options" :key="option.value">
      <Checkbox
          v-model="selectedValues"
          :value="option.value"
          :label="option.label"
      />
    </div>

    <!-- 示例5: 半选状态 -->
    <Checkbox
        v-model="checked5"
        label="半选状态"
        :indeterminate="true"
    />

    <!-- 示例6: 自定义插槽 -->
    <Checkbox v-model="checked6">
      <span style="color: green">自定义标签内容</span>
    </Checkbox>
  </div>

</template>

<script setup>
import {ref} from 'vue'
import Checkbox from '@/components/Checkbox/Checkbox.vue'

const checked1 = ref(false)
const checked2 = ref(true)
const checked3 = ref(false)
const checked5 = ref(false)
const checked6 = ref(false)

// 复选框组示例
const options = ref([
  {value: 'vue', label: 'Vue.js'},
  {value: 'react', label: 'React'},
  {value: 'angular', label: 'Angular'}
])
const selectedValues = ref(['vue'])
</script>